<template>
  <el-dialog title="编辑角色" :visible.sync="dialogVisible" width="30%" :append-to-body="true">
    <el-form ref="editForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="usrName">
        <el-input v-model="form.usrName" autocomplete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="form.realName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="certNo">
        <el-input v-model="form.certNo"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="电子邮件" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="note">
        <el-input type="textarea" v-model="form.note"></el-input>
      </el-form-item>
      <el-form-item label="用户角色">
        <el-select v-model="form.roles" @change="select_status" multiple style="width:100%">
          <el-option
            v-for="item in data"
            :key="item.objectId"
            :label="item.name"
            :value="item.objectId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门" prop="depts">
        <TreeSelect
          :data="deptData"
          :width="432"
          multiple
          :check-strictly="true"
          :checkedKeys="defaultCheckedKeys"
          :defaultProps="defaultProps"
          @popoverHide="popoverHide"
        ></TreeSelect>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-radio-group v-model="form.type">
          <el-radio-button label="超级管理员" />
          <el-radio-button label="一般用户" />
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('editForm')">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import TreeSelect from "@/components/basic-treeselect/treeselect";
import { baseUrl } from "@/config/env";
import { checkUniqueNoMe } from "@/checkunique.js";
const urls = {
  save: baseUrl + "/cp/usr/au-usr/edit",
  get: baseUrl + "/cp/usr/au-usr/edit_form",
  list: baseUrl + "/cp/role/au-role/select_list",
  dept_list: baseUrl + "/cp/dept/au-dept/tree",
  role_my_list: baseUrl + "/cp/usr/au-usr-role/list",
  dept_my_list: baseUrl + "/cp/usr/au-usr-dept/list"
};
export default {
  data() {
    return {
      dialogVisible: false,
      data: [],
      deptData: [],
      defaultCheckedKeys: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      form: {
        objectId: null,
        usrName: null,
        realName: null,
        certNo: null,
        mobile: null,
        email: null,
        roles: [],
        depts: "",
        type: null,
        note: null
      },
      rules: {
        usrName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              checkUniqueNoMe(
                baseUrl,
                "t_au_usr",
                "USR_NAME",
                value,
                this.form.objectId
              ).then(data => {
                if (data) {
                  return callback(new Error("该用户名已经存在"));
                } else {
                  return callback();
                }
              });
            },
            trigger: "blur"
          }
        ],
        email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }]
      }
    };
  },
  components: {
    TreeSelect
  },
  methods: {
    popoverHide(checkedIds, checkedData) {
      this.form.depts = checkedIds.toString();
    },
    show(objectId) {
      this.dialogVisible = true;
      if (this.$refs["editForm"]) {
        this.$refs["editForm"].resetFields();
      }
      this.fetch(objectId);
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.roles = this.form.roles.toString();
          this.form.type = this.form.type == "一般用户" ? 1 : 0;
          axios.post(urls.save, this.form).then(res => {
            this.$message(res.data.result);
            this.dialogVisible = false;
            this.$emit("refresh");
          });
        }
        return false;
      });
    },
    select_status() {
      this.$forceUpdate();
    },
    fetch(objectId) {
      axios.get(urls.get, { params: { objectId: objectId } }).then(res => {
        let data = res.data.result;
        this.form = {
          objectId: data.objectId,
          usrName: data.usrName,
          realName: data.realName,
          certNo: data.certNo,
          mobile: data.mobile,
          email: data.email,
          note: data.note,
          type: data.type == 1 ? "一般用户" : "超级管理员"
        };
      });
      axios.post(urls.list).then(res => {
        this.data = res.data.result;
        this.getRole(objectId);
      });
      axios.get(urls.dept_list).then(res => {
        this.deptData = res.data.result;
        this.getDepart(objectId);
      });
    },
    getDepart(usrId) {
      axios.get(urls.dept_my_list, { params: { usrId: usrId } }).then(res => {
        const data = res.data.result;
        this.defaultCheckedKeys = data.map(item => {
          return item.deptId;
        });
        this.form.depts = this.defaultCheckedKeys.toString();
      });
    },
    getRole(usrId) {
      axios.get(urls.role_my_list, { params: { usrId: usrId } }).then(res => {
        var rolesarr = [];
        for (var i = 0; i < res.data.result.length; i++) {
          rolesarr.push(res.data.result[i].roleId);
        }
        this.form.roles = rolesarr;
      });
    }
  },
  mounted() {
    this.getRole();
    this.getDepart();
  }
};
</script>